<template>
  <div class="h-[100%]">
    <div class="flex justify-between items-center h-[32px]">
      <div class="flex items-center justify-center">
        <SvgIcon icon-class="gonggao1" />
        <span class="ml-[4px] font-bold">公告通知</span>
      </div>
      <div>
        <el-button link type="primary" @click="handleMore"
          >更多<el-icon><DArrowRight /></el-icon
        ></el-button>
      </div>
    </div>
    <div class="content_main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="系统通知" name="system">
          <List key="system" :data="systemList" />
        </el-tab-pane>
        <el-tab-pane label="行政通知" name="administrative"
          ><List key="administrative" :data="adminList"
        /></el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>
<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import { messageList } from "@/api/system/notice.js";
import List from "./list/index.vue";
const emit = defineEmits(["more"]);
const handleMore = () => {
  emit("more");
};
const systemList = ref([]);
const adminList = ref([]);
const messageData = async (type) => {
  try {
    const { data } = await messageList({ pageNum: 1, pageSize: 10, type });
    if (type == 1) {
      systemList.value = data || [];
    } else {
      adminList.value = data || [];
    }
  } catch (error) {}
};
messageData(1);
const handleClick = (tab,val) => {
  if (tab.props.name == "system") {
    messageData(1);
  } else {
    messageData(2);
  }
};
const activeName = ref("system");
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  background: #fafafa;
  box-shadow: none;
}
.content_main {
  height: calc(100% - 32px);
  :deep(.el-tabs) {
    height: 100%;
  }
}
</style>
